<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用v-show做条件渲染隐藏 节点还在 -->
      <!-- <h2 v-show="false">欢迎来到{{name1}}</h2> -->
      <!-- <h2 v-show="true">欢迎来到{{name2}}</h2> -->
      <!-- 使用v-if做条件渲染隐藏 节点删除-->
      <!-- <h2 v-if="false">欢迎来到{{name3}}</h2> -->
      <!-- <h2 v-if="1===1">欢迎来到{{name4}}</h2> -->
      <h2>当前值是{{n}}</h2>
      <button @click="n++">n加1</button>
      <div v-if="n===1">Angular</div>
      <div v-if="n===2">React</div>
      <div v-if="n===3">Vue</div>
    </div>

    <script>
      Vue.createApp({
        data() {
          return {
            name1: "实打实打算的1",
            name2: "实打实打算的2",
            name3: "实打实打算的3",
            name4: "实打实打算的4",
            n: 0,
          };
        },
        computed: {},
        methods: {},
      }).mount("#app");
    </script>
  </body>
</html>
